function Enlarge(queryCssString) {

    this.domContainer = document.querySelector(queryCssString);
  
    // 变量命名的约定：尽量能通过变量名 看出 变量 类型
    this.domShow = this.domContainer.querySelector('.show');
    this.domMask = this.domContainer.querySelector('.mask');
    this.domEnlarge = this.domContainer.querySelector('.enlarge');
    this.domBtns = this.domContainer.querySelectorAll('.btns > div');
  
    this.bindBtnsClick();
    this.enterOrLeaveShow();
    this.moveMask();
  }
  
  
  // 1. 点击 btn ，使得 show 的图片 根据 btn 切换， enlarger 亦如此。
    // 注： 通常我们 函数 命名的约定：一般 第一个 单词为 动词
  Enlarge.prototype.bindBtnsClick = function() {
    // 1) 绑定点击事件
    this.domBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        // 2）点击 任意 btn 其 .active 要进行改变
        {
          this.domBtns.forEach((btnSelf) => {
            btnSelf.classList.remove('active');
          })
          btn.classList.add('active');
        }
  
        
        // 3）点击 任意 btn， show 的图片跟随 btn 变换
        this.domShow.querySelector('img').src = btn.dataset.src;
  
        // 4）点击 任意 btn， enlarge 的图片跟随 btn 变换
        this.domEnlarge.style.backgroundImage = `url(${btn.dataset.enlargeSrc})`;
      })
    });
  }
  
  // 2. 鼠标 移入 show, mask  和  enlarge 显示;  移出 mask 和 enlarge 隐藏
  Enlarge.prototype.enterOrLeaveShow = function() {
    const that = this;
    this.domShow.addEventListener('mouseenter', function() {
      that.domMask.style.display = 'block';
      that.domEnlarge.style.display = 'block';
    });
  
    this.domShow.addEventListener('mouseleave', function() {
      that.domMask.style.display = 'none';
      that.domEnlarge.style.display = 'none';
    });
  }
  
  // 3. 鼠标在 show 里面移动， mask 跟随鼠标移动
    // 同时 enlarge 显示的内容 是 mask 覆盖的 图片的内容
  Enlarge.prototype.moveMask = function() {
    document.addEventListener('mousemove', (e) => {
      this.maskWidth = offsetWidth;
      this.maskHeight = offsetHeight;
  
      let x = e.clientX - this.domContainer.offsetLeft - this.maskWidth / 2;
      let y = e.clientY - this.domContainer.offsetTop - this.maskHeight / 2;
  
      const showWidth = this.domShow.offsetWidth;
      const showHeight = this.domShow.offsetHeight;
  
      if (x < 0) {
        x = 0;
      }
  
      if (y < 0) {
        y = 0;
      }
  
      if (x > (showWidth - this.maskWidth)) {
        x = showWidth - this.maskWidth;
      }
  
      if (y > (showHeight - this.maskHeight)) {
        y = showHeight - this.maskHeight;
      }
  
      this.domMask.style.top = y + 'px';
      this.domMask.style.left = x + 'px';
  
      /* 
        mask移动的位置           show的大小(中等图片的大小)
      ----------------    =  ---------------------------- 
        enlarge移动的位置             大图片的大小
  
        enlarge移动的位置 *  show的大小  = mask移动的位置 * 大图片的大小
        enlarge移动的位置 = mask移动的位置 * 大图片的大小 / show的大小
      */
        
        const [bigWidth, bigHeight] = getComputedStyle(this.domEnlarge)
          .backgroundSize
          .split(' ')
          .map(num => parseFloat(num));
  
  
        const enlargeX = x * bigWidth / showWidth;
        const enlargeY = y * bigHeight / showHeight;
  
        this.domEnlarge.style.backgroundPosition = `-${enlargeX}px -${enlargeY}px`;
    });
  }
  
  export default Enlarge;